<template>
  <div>
    <h1>【aty-tree】 component demo</h1>
    <p> 【aty-tree】 本质</p>
    <aty-row class="fd-tree-box">
      <aty-row v-if="show">
        <aty-title level="4">1.【aty-tree】 基础用法</aty-title>

        <aty-row>
          <aty-col span="6">
            <aty-panel>基础的树形结构展示。只需要传递data</aty-panel>
            <aty-tree :data="data" />
          </aty-col>
          <aty-col offset="1" span="6">
            <aty-panel>基础的树形结构展示。带图标</aty-panel>
            <aty-tree :data="data" showIcon />
          </aty-col>
          <aty-col offset="1" span="6">
            <aty-panel>基础的树形结构展示。带简单的事件</aty-panel>
            <aty-tree :data="data" showIcon @select="select" />
          </aty-col>
        </aty-row>
        <aty-row style="padding-top: 20px">
          <aty-col span="6">
            <aty-panel>自动加载数据，配置 requestDataUrl </aty-panel>
            <aty-tree autoRequestData showLog requestDataUrl="./static/json/tree.json" />
          </aty-col>
          <aty-col offset="1" span="6">
            <aty-panel>自动加载数据，配置 requestDataMethod，</aty-panel>
            <aty-tree autoRequestData :requestDataMethod="requestDataMethod2" />
          </aty-col>
          <aty-col offset="1" span="8">
            <aty-panel>自动加载数据，可配置额外参数 requestDataExtendsParams</aty-panel>
            <aty-tree autoRequestData
                      showLog
                      requestDataUrl="./static/json/tree.json"
                      :requestDataExtendsParams="requestDataExtendsParams" />
          </aty-col>
        </aty-row>
      </aty-row>

      <aty-row v-if="show">
        <aty-title level="4">2. 【aty-tree】复选框</aty-title>
        <aty-row>
          <aty-col span="6">
            <aty-panel>数据中的checked属性控制选中,复选框 check 事件,</aty-panel>
            <aty-tree :data="data" showCheckbox @check="check" />
          </aty-col>
          <aty-col offset="1" span="6">
            <aty-panel>复选框带图标</aty-panel>
            <aty-tree :data="data" showCheckbox showIcon />
          </aty-col>
          <aty-col offset="1" span="6">
            <aty-panel>复选框connectParent联动父级</aty-panel>
            <aty-tree :data="data" showCheckbox showIcon connectParent @check="check" />
          </aty-col>
        </aty-row>
        <aty-row>
          <aty-col span="6">
            <aty-panel>通过checkedIds设置默认选中</aty-panel>
            <aty-tree :data="data" showCheckbox :checkedIds="checkedIds" />
          </aty-col>
        </aty-row>
        <aty-panel>本例还展示了动态加载节点数据的方法。</aty-panel>
      </aty-row>

      <aty-row v-if="show">
        <aty-title :level="4">3.【aty-tree】支持懒加载</aty-title>
        <aty-row>
          <aty-col span="6">
            <aty-panel>懒加载</aty-panel>
            <aty-tree :data="data" lazyLoad :requestDataMethod="requestDataMethod" />
          </aty-col>

          <aty-col offset="4" span="6">
            <aty-panel>懒加载+远程搜索</aty-panel>
            <aty-tree canSearch lazyLoad :data="data5" :requestDataMethod="requestDataMethod3"
                      remote :remoteMethod="remoteMethod1" />
          </aty-col>

        </aty-row>
      </aty-row>

      <aty-row v-if="show">
        <aty-title level="4">4.【aty-tree】 默认展开和默认选中</aty-title>
        <aty-panel>分别通过设置数据的open和 activeId </aty-panel>
        <aty-row>
          <aty-col span="6">
            <aty-panel>数据中的open</aty-panel>
            <aty-tree :data="data2" />
          </aty-col>
          <aty-col offset="4" span="6">
            <aty-panel>activeId属性，激活的id</aty-panel>
            <aty-tree :data="data" :activeId="activeId" />
          </aty-col>
        </aty-row>
      </aty-row>

      <aty-row v-if="show">
        <aty-title level="4">5.【aty-tree】 禁用状态</aty-title>
        <aty-row>
          <aty-col span="6">
            <aty-panel>设置数据中的disabled</aty-panel>
            <aty-tree :data="data3" />
          </aty-col>
        </aty-row>
      </aty-row>

      <aty-row v-if="show">
        <aty-title level="4">6. 【aty-tree】操作树节点的</aty-title>
        <aty-row>
          <aty-panel>数据中的checked属性控制选中,复选框 check 事件,</aty-panel>
          <aty-tree hasOperate
                    showCheckbox
                    :data="data4"
                    :activeId="activeId4"
                    :checkedIds="checkedIds2"
                    @ready="ready"
                    @moveUp="moveUp"
                    @moveDown="moveDown"
                    @delete="deleteNode">
            <aty-button text="get ActiveId" @click="clickGetActiveId" type="primary" />
            <aty-button text="set ActiveId" @click="clickSetActiveId" type="primary" />
            <aty-button text="get ActiveNodes" @click="clickGetActiveNodes" type="primary" />
            <aty-button text="get CheckedIds" @click="clickGetCheckedIds" type="success" />
            <aty-button text="set CheckedIds" @click="clickSetCheckedIds" type="success" />
            <aty-button text="get CheckedNodes" @click="clickGetCheckedNodes" type="success" />
            <aty-button text="clear checked" @click="clickClearChecked" type="error" />
          </aty-tree>
        </aty-row>
      </aty-row>

      <aty-row v-if="show">
        <aty-title level="4">7.【aty-tree】 双击修改树节点名</aty-title>
        <aty-row>
          <aty-col span="12">
            <aty-panel>双击修改树节点名</aty-panel>
            <aty-tree :data="data2" canMendName @mend-name="mendName" />
          </aty-col>
        </aty-row>
      </aty-row>

      <aty-row v-if="show">
        <aty-title level="4">8.【aty-tree】 展开/收起事件</aty-title>
        <aty-row>
          <aty-col span="12">
            <aty-panel>双击修改树节点名</aty-panel>
            <aty-tree :data="data2" @expand="expand" @collapse="collapse" />
          </aty-col>
        </aty-row>
      </aty-row>

      <aty-row v-if="show">
        <aty-title level="4">9.【aty-tree】过滤查找  <strong>！important</strong></aty-title>
        <aty-row>
          <aty-col span="6">
            <aty-panel>本地快速定位查找</aty-panel>
            <aty-tree :data="data2" canSearch />
          </aty-col>
          <aty-col offset="1" span="6">
            <aty-panel>远程数据库搜索查找，配置 remoteUrl 和remote</aty-panel>
            <aty-tree :data="data2"
                      canSearch

                      remote
                      remoteUrl="/static/json/tree-search.json" />
          </aty-col>
          <aty-col offset="1" span="10">
            <aty-panel>远程数据库搜索查找,并进行异步加载，配置 remoteMethod 可自定义方法</aty-panel>
            <aty-tree

              canSearch

              requestDataUrl="./static/json/tree.json"
              autoRequestData

              remote
              :remoteMethod="remoteMethod" />
          </aty-col>
        </aty-row>
      </aty-row>

      <aty-row v-if="show">
        <aty-title level="4">10.【aty-tree】 可拖拽节点</aty-title>
        <aty-row>
          <aty-col span="8">
            <aty-panel>可任意拖拽节点</aty-panel>
            <aty-tree :data="data2"
                      draggable
                      @dragstart="dragstart"
                      @drag="drag"
                      @dragend="dragend"
                      @dragenter="dragenter"
                      @dragover="dragover"
                      @dragleave="dragleave"
                      @drop="drop" />
          </aty-col>
          <aty-col offset="1" span="8">
            <aty-panel>有限制的拖拽,只允许同一根节点内部拖动</aty-panel>
            <aty-tree :data="data2"
                      draggable
                      :allowDrop="allowDrop"
                      @dragstart="dragstart"
                      @drag="drag"
                      @dragend="dragend"
                      @dragenter="dragenter"
                      @dragover="dragover"
                      @dragleave="dragleave"
                      @drop="drop" />
          </aty-col>
        </aty-row>
      </aty-row>

    </aty-row>
  </div>
</template>

<script>
const _draggable = true
let _dynimicId = 1
export default {
  data () {
    return {
      show: true,
      // 额外的请求参数
      requestDataExtendsParams: {
        fdId: 'zgrmfy-id-001',
        fymc: 'zgrmfy'
      },
      tree: null,
      activeId: '1',
      activeId4: '2',
      checkedIds: ['1', '1-1', '2-2'],
      checkedIds2: ['1', '1-1', '2-2'],
      data: (function (len) {
        var _data = []
        let k = 0
        console.time('p')
        for (let i = 0; i < len; i++) {
          k++
          _data.push(
            {
              name: '一级 ' + k,
              id: '' + k,
              open: true,
              checked: true,
              draggable: _draggable,
              icon: '/static/treeIcon/avatar.png',
              children: [{
                id: k + '-' + k,
                name: '二级 ' + k + '-' + k,
                icon: '/static/treeIcon/avatar.png',
                draggable: _draggable,
                children: [{
                  icon: '/src/components/css/images/treeIcon/avatar.png',
                  id: k + '-' + k + '-' + k,
                  name: '三级 ' + k + '-' + k + '-' + k,
                  draggable: _draggable,
                  children: [{
                    icon: '/src/components/css/images/treeIcon/avatar.png',
                    id: k + '-' + k + '-' + k + '-' + k,
                    name: '三级 ' + k + '-' + k + '-' + k + '-' + k,
                    draggable: _draggable
                  },
                  {
                    icon: '/src/components/css/images/treeIcon/avatar.png',
                    id: k + '-' + k + '-' + k + '-' + k + '2',
                    name: '三级 ' + k + '-' + k + '-' + k + '-' + k + '2',
                    draggable: _draggable
                  }

                  ]
                }
                ]
              },
              {
                id: k + '-' + k + '00',
                draggable: _draggable,
                name: '二级 ' + k + '-' + k + '000'
              }]
            }
          )
        }
        console.timeEnd('p')
        return _data
      })(3),
      data2: (function (len) {
        var _data = []
        let k = 0
        for (let i = 0; i < len; i++) {
          k++
          _data.push(
            {
              name: '一级 ' + k,
              id: '' + k,
              open: true,
              children: [{
                id: k + '-' + k,
                name: '二级 ' + k + '-' + k,
                open: true,
                children: [{
                  icon: '/src/components/css/images/treeIcon/avatar.png',
                  id: k + '-' + k + '-' + k,
                  open: true,
                  name: '三级 ' + k + '-' + k + '-' + k,
                  children: [{
                    icon: '/src/components/css/images/treeIcon/avatar.png',
                    id: k + '-' + k + '-' + k + '-' + k,
                    name: '三级 ' + k + '-' + k + '-' + k + '-' + k,
                    draggable: _draggable
                  },
                  {
                    icon: '/src/components/css/images/treeIcon/avatar.png',
                    id: k + '-' + k + '-' + k + '-' + k + '2',
                    name: '三级 ' + k + '-' + k + '-' + k + '-' + k + '2',
                    draggable: _draggable
                  }
                  ]
                }
                ]
              }]
            }
          )
        }
        return _data
      })(3),
      data3: (function (len) {
        var _data = []
        let k = 0
        for (let i = 0; i < len; i++) {
          k++
          _data.push(
            {
              name: '一级 ' + k,
              id: '' + k,
              disabled: true,
              children: [{
                id: k + '-' + k,
                name: '二级 ' + k + '-' + k,
                disabled: false,
                children: [{
                  icon: '/src/components/css/images/treeIcon/avatar.png',
                  id: k + '-' + k + '-' + k,
                  disabled: false,
                  name: '三级 ' + k + '-' + k + '-' + k
                }]
              }]
            }
          )
        }
        return _data
      })(3),
      data4: (function (len) {
        var _data = []
        let k = 0
        console.time('p')
        for (let i = 0; i < len; i++) {
          k++
          _data.push(
            {
              name: '一级 ' + k,
              id: '' + k,
              open: true,
              draggable: _draggable,
              icon: '/static/treeIcon/avatar.png',
              children: [{
                id: k + '-' + k,
                name: '二级 ' + k + '-' + k,
                icon: '/static/treeIcon/avatar.png',
                draggable: _draggable,
                children: [{
                  icon: '/src/components/css/images/treeIcon/avatar.png',
                  id: k + '-' + k + '-' + k,
                  name: '三级 ' + k + '-' + k + '-' + k,
                  draggable: _draggable,
                  children: [{
                    icon: '/src/components/css/images/treeIcon/avatar.png',
                    id: k + '-' + k + '-' + k + '-' + k,
                    name: '三级 ' + k + '-' + k + '-' + k + '-' + k,
                    draggable: _draggable
                  },
                  {
                    icon: '/src/components/css/images/treeIcon/avatar.png',
                    id: k + '-' + k + '-' + k + '-' + k + '2',
                    name: '三级 ' + k + '-' + k + '-' + k + '-' + k + '2',
                    draggable: _draggable
                  }

                  ]
                }
                ]
              },
              {
                id: k + '-' + k + '00',
                draggable: _draggable,
                name: '二级 ' + k + '-' + k + '000'
              }]
            }
          )
        }
        console.timeEnd('p')
        return _data
      })(3),
      data5: [
        {
          name: '体育',
          id: '1'
        }, {
          name: '水果',
          id: '2'
        }
      ]
    }
  },
  watch: {

  },
  methods: {
    remoteMethod (query, callback) {
      // console.log(query)
      setTimeout(() => {
        console.log('method 方法')
        const _data = [
          {
            name: '1一级数据',
            id: '1'
          },
          {
            name: '1二级数据',
            id: '1,1-1'
          },
          {
            name: '1三级数据2',
            id: '1,1-1,1-2-2'
          },
          {
            name: '1三级数据3',
            id: '1,1-1,1-2-3'
          }
        ]
        callback(_data)
      }, 300)
    },

    remoteMethod1 (query, callback) {
      setTimeout(function () {
        callback([{
          id: '1,1-1',
          name: '足球'
        },
        {
          id: '1,1-2',
          name: '篮球'
        },
        {
          id: '2,2-1',
          name: '苹果'
        },
        {
          id: '2,2-2',
          name: '橘子'
        }
        ])
      }, 500)
    },

    // 选中节点触发的事件
    select (treeNodeData, treeNode, event) {
      console.log('select')
      console.log(treeNodeData, treeNode, event)
    },

    // 选中节点触发的事件
    check (checked, treeNodeData, treeNode, currentCheckedIds, currentCheckedNodes, event) {
      // debugger
      console.log('check')
      console.log(checked)
      console.log(treeNodeData)
      console.log(treeNode)
      console.log(currentCheckedIds)
      console.log(currentCheckedNodes)
      console.log(event)
    },

    /*
     * 选中节点触发的事件
     * 懒加载
     */
    requestDataMethod (id, callback) {
      console.log('lazyLoad')
      console.log(id)
      var _this = this
      _dynimicId++
      if (id == '1-1-1-1') {
        setTimeout(function () {
          callback([])
        }, 2000)
      } else {
        setTimeout(function () {
          callback([{
            id: 'dynamic-' + _dynimicId + 1,
            name: '新增的test数据 '
          },
          {
            id: 'dynamic-' + _dynimicId + 2,
            name: '新增的test数据 '
          },
          {
            id: 'dynamic-' + _dynimicId + 3,
            name: '新增的test数据 '
          }
          ])
        }, 2000)
      }
    },
    requestDataMethod2 (id, callback) {
      callback([{
        id: 'dynamic-' + _dynimicId + 1,
        name: 'test数据1 ',
        children: [
          {
            id: 'dynamic-' + _dynimicId + 11,
            name: 'test数据1二级1 ',
            children: [

            ]
          },
          {
            id: 'dynamic-' + _dynimicId + 12,
            name: 'test数据1二级2 ',
            children: [

            ]
          }

        ]
      },
      {
        id: 'dynamic-' + _dynimicId + 2,
        name: '新增的test数据 '
      },
      {
        id: 'dynamic-' + _dynimicId + 3,
        name: '新增的test数据 '
      }
      ])
    },
    requestDataMethod3 (id, callback) {
      console.log('开始加载节点"' + id + '"的数据：')
      if (id == '1') {
        setTimeout(function () {
          callback([{
            id: '1-1',
            name: '足球'
          },
          {
            id: '1-2',
            name: '篮球'
          }
          ])
        }, 500)
      } else if (id == '2') {
        setTimeout(function () {
          callback([{
            id: '2-1',
            name: '苹果'
          },
          {
            id: '2-2',
            name: '橘子'
          }
          ])
        }, 500)
      } else {
        callback([])
      }
    },
    ready (tree) {
      this.tree = tree
      console.log('【tree：对象】')
      console.log(this.tree)
    },
    moveUp (data, treeNode) {
      console.log('moveUp')
      console.log(data, treeNode)
    },
    moveDown (data, treeNode) {
      console.log('moveDown')
      console.log(data, treeNode)
    },
    deleteNode (data, treeNode) {
      console.log('delete')
      console.log(data, treeNode)
    },

    clickGetActiveId () {
      const getActiveId = this.tree.getActiveId()
      console.log('getActiveId')
      console.log(getActiveId)
    },
    clickSetActiveId () {
      console.log('setActiveId')
      this.tree.setActiveId('1')
    },
    clickGetActiveNodes () {
      console.log('getActiveNodes')
      const getActiveTreeNode = this.tree.getActiveTreeNode()
      console.log(getActiveTreeNode)
    },

    clickGetCheckedIds () {
      const getCheckedIds = this.tree.getCheckedIds()
      console.log('getCheckedIds')
      console.log(getCheckedIds)
    },
    clickSetCheckedIds () {
      console.log('setCheckedIds')
      this.tree.setCheckedIds(['2-2', '3-3'])
    },
    clickGetCheckedNodes () {
      console.log('getCheckedTreeNodes')
      const getCheckedTreeNodes = this.tree.getCheckedTreeNodes()
      console.log(getCheckedTreeNodes)
    },

    clickClearChecked () {
      console.log('clearChecked')
      this.tree.setCheckedIds([])
    },

    mendName (data, dataNode, event) {
      console.log('mendName')
      console.log(data)
      console.log(dataNode)
    },
    // 展开
    expand (currentNode, dataNode, event) {
      console.log('expand')
      console.log(currentNode, dataNode, event)
    },
    // 收起
    collapse (currentNode, dataNode, event) {
      console.log('collapse')
      console.log(currentNode, dataNode, event)
    },

    allowDrop (draggingNode, dropNode) {
      return draggingNode.index.split('-')[0] == dropNode.index.split('-')[0]
    },

    //  拖动事件
    dragstart (draggingNode, ev) {
      console.log('dragstart')
      console.log(draggingNode)
      console.log('\n')
    },
    drag (draggingNode, ev) {
      console.log('drag')
      console.log(draggingNode)
      console.log('\n')
    },
    dragend (draggingNode, ev) {
      console.log('dragend')
      console.log(draggingNode)
      console.log('\n')
    },
    dragenter (draggingNode, enterNode, ev) {
      console.log('dragenter')
      console.log(draggingNode)
      console.log(enterNode)
      console.log('\n')
    },

    dragover (draggingNode, overNode, ev) {
      console.log('dragover')
      console.log(draggingNode)
      console.log(overNode)
      console.log('\n')
    },
    dragleave (draggingNode, leaveNode, ev) {
      console.log('dragleave')
      console.log(draggingNode)
      console.log(leaveNode)
      console.log('\n')
    },
    drop (draggingNode, dropNode, postion, ev) {
      console.log('drop')
      console.log(draggingNode)
      console.log(dropNode)
      console.log(postion)
      console.log('\n')
    }
  },
  created () {
    console.time('p2')
  },
  mounted () {
    var _this = this
    var _async = false
    if (_async) {
      setTimeout(() => {
        const _data = [{
          id: '0000',
          draggable: _draggable,
          name: '二级 修改'
        },
        {
          id: '02000',
          draggable: _draggable,
          name: '三级 修改'
        }
        ]
        this.data = _data
        this.checkedIds = ['02000']
      }, 5000)
    }
    console.timeEnd('p2')
  }
}
</script>
<style  lang="less" type="text/less"  >
    .fd-tree-box {
        margin: 20px;
        text-align: left;
    >.aty-row {
         margin-bottom: 20px;
     }
    }
</style>
